<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import GrafanaEmbed from './GrafanaEmbed.vue';

const currentTime = ref(new Date())
const grafanaUrl = import.meta.env.VITE_GRAFANA_URL || 'http://192.168.242.145:3000/d/node-exporter-full';

onMounted(() => {
  const timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)

  // 组件销毁时清除定时器
  onUnmounted(() => {
    clearInterval(timer)
  })
})

// 计算颜色值，优化渐变算法以更快达到黄色
// 计算颜色值，实现10秒内从蓝色(0, 0, 255)渐变到黑色(0, 0, 0)
const textColor = computed(() => {
  const seconds = currentTime.value.getSeconds() % 10; // 限制在10秒内循环
  // 0-10秒内从蓝色(0, 0, 255)渐变到黑色(0, 0, 0)
  let r, g, b;
  
  // 从蓝色(0, 0, 255)到黑色(0, 0, 0)
  r = 0;
  g = 0;
  b = Math.max(0, 255 - Math.floor(seconds * (255 / 10)));
  
  return `rgb(${r}, ${g}, ${b})`;
})

const pad2 = (n: number) => n.toString().padStart(2, '0')

const formatDate = (date: Date) => {
  const year = date.getFullYear()
  const month = pad2(date.getMonth() + 1)
  const day = pad2(date.getDate())
  const hours = pad2(date.getHours())
  const minutes = pad2(date.getMinutes())
  const seconds = pad2(date.getSeconds())
  const week = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
  
  return {
    year,
    month,
    day,
    hours,
    minutes,
    seconds,
    week
  }
}

const now = computed(() => formatDate(currentTime.value))

const formattedDate = computed(() => `${now.value.year}年${now.value.month}月${now.value.day}日`)
const formattedTime = computed(() => `${now.value.hours}:${now.value.minutes}:${now.value.seconds}`)
</script>


<template>
  <div class="dashboard-container">
    <div class="info-box">
      <div class="header">
        <div class="welcome-container">
          <div class="welcome-text chinese" :style="{ color: textColor }">
            您好，欢迎使用Kylin AIOps
          </div>
          <div class="welcome-text english" :style="{ color: textColor }">
            Hello, Welcome to Kylin AIOps
          </div>
        </div>
        <div class="time-info">
          <table>
            <thead>
              <tr>
                <th>日期</th>
                <th>时间</th>
                <th>星期</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{{ formattedDate }}</td>
                <td class="mono">{{ formattedTime }}</td>
                <td>星期{{ now.week }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="chart-box">
      <GrafanaEmbed 
        :base-url="grafanaUrl"
        timeRange="from=now-24h&to=now"
        style="height: 800px;" 
      />
    </div>
  </div>
</template>


<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.info-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background-color: #f9f9f9;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-container {
  position: relative;
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 24px;
  font-weight: bold;
  transition: color 1s ease;
  
  &.chinese {
    position: relative;
    z-index: 2;
  }
  
   &.english {
    position: relative;
    z-index: 1;
    margin-top: 10px; /* 修改这里：从-10px改为0px，实现向下移动10px */
    margin-left: 80px; 
    font-size: 20px;
    opacity: 0.8;
  }
}

.time-info table {
  border-collapse: collapse;
}

.time-info th, .time-info td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.time-info .mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.chart-box {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
  min-height: 400px; 
}
</style>